<div class="container m-auto my-10">
  <div class="flex flex-wrap justify-center">
    <div class="text-center">
      <h1><%= t(".heading") %></h1>
      <p class="mt-2 text-xl text-gray-500"><%= t(".subhead") %></p>
    </div>
  </div>
  <div data-controller="pricing"
       data-pricing-active-frequency-class="shadow-sm text-black hover:text-black bg-white dark:text-white dark:hover:text-white dark:bg-gray-900"
       data-pricing-inactive-frequency-class="hover:text-gray-900 dark:text-gray-50 dark:hover:text-gray-200"
       data-pricing-inactive-plans-class="hidden"
       data-pricing-hidden-toggle-class="hidden"
       class="sm:flex flex-wrap items-center justify-center">
    <div data-pricing-target="toggle" class="hidden relative self-center my-8 bg-gray-200 dark:bg-gray-700 rounded-full p-0.5 flex sm:mt-8">
      <button type="button" data-action="pricing#switch" data-pricing-target="frequency" data-frequency="monthly" class="relative w-1/2 border-gray-200 rounded-full py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:z-10 sm:w-auto sm:px-8">Monthly</button>
      <button type="button" data-action="pricing#switch" data-pricing-target="frequency" data-frequency="yearly" class="ml-0.5 relative w-1/2 border border-transparent rounded-full py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:z-10 sm:w-auto sm:px-8">Yearly</button>
    </div>
    <div data-turbo-prefetch="false" class="w-full lg:px-0 px-2">
      <div data-pricing-target="plans" data-frequency="monthly" class="flex flex-wrap items-center justify-center -mx-4">
        <% @monthly_plans.each do |plan| %>
          <%= render layout: "subscriptions/plan", locals: { plan: plan } do %>
            <%= pricing_link_to(plan) %>
        <% end %>
      <% end %>
      </div>
      <div data-pricing-target="plans" data-frequency="yearly" class="hidden flex flex-wrap items-center justify-center -mx-4">
        <% @yearly_plans.each do |plan| %>
          <%= render layout: "subscriptions/plan", locals: { plan: plan } do %>
            <%= pricing_link_to(plan) %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>
